<template>
  <div>
    <el-dialog
      :title="$t('所属设备')"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="1150px"
    >
      <div class="head_search u-f u-f-ac u-fw border_bottom">
        <div class="ipt_box u-f u-f-ac">
          <p class="label font14 text_black">{{ $t("机柜号") }}：</p>
          <el-input
            v-model="device_id"
            :placeholder="$t('请输入机柜号')"
          ></el-input>
        </div>
        <div class="ipt_box u-f u-f-ac">
          <p class="label font14 text_black">{{ $t("二维码") }}：</p>
          <el-input
            v-model="qrcode"
            :placeholder="$t('请输入二维码')"
          ></el-input>
        </div>
        <div class="div_box u-f u-f-ac">
          <p class="label font14 text_black">{{ $t("所属商户") }}：</p>
          <div
            class="content font14 text_black u-f u-f-ac"
            @click="openMerchantList"
          >
            <p class="text-ellipsis">
              {{ merchant ? merchant : $t("选择商户") }}
            </p>
          </div>
          <button
            class="btn font14 text_white bg_danger"
            @click="clearMerchant"
          >
            {{ $t("清除") }}
          </button>
        </div>
        <div class="select_box u-f u-f-ac">
          <p class="label font14 text_black">{{ $t("在线状态") }}：</p>
          <el-select
            v-model="clientVal"
            :placeholder="$t('请选择')"
            @change="clientChange"
          >
            <el-option
              v-for="item in clientArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="select_box u-f u-f-ac">
          <p class="label font14 text_black">{{ $t("数据") }}：</p>
          <el-select
            v-model="is_sub"
            :placeholder="$t('请选择')"
            @change="subChange"
          >
            <el-option
              v-for="item in subArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">
          {{ $t("提交") }}
        </button>
        <button class="export_btn font14 text_white bg_blue" @click="exportExcel">
        {{ $t("导出") }}
      </button>
      </div>

      <div class="table_box">
        <el-table :data="tableData">
          <el-table-column
            prop="cabinet_id"
            :label="$t('机柜号')"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="name"
            :label="$t('所在商铺')"
          ></el-table-column>
          <el-table-column
            prop="address"
            :label="$t('所在区域')"
          ></el-table-column>
          <el-table-column
            prop="device_num"
            :label="$t('充电槽数量')"
          ></el-table-column>
          <el-table-column prop="borrow_num" :label="$t('可借')">
            <template slot-scope="{ row }">
              <p class="circle u-f u-f-ac u-f-jc text_white font18 bg_blue">
                {{ row.borrow_num }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="return_num" :label="$t('可还')">
            <template slot-scope="{ row }">
              <p class="circle u-f u-f-ac u-f-jc text_white font18 bg_danger">
                {{ row.return_num }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="model"
            :label="$t('机柜型号')"
          ></el-table-column>
          <el-table-column prop="qrcode" :label="$t('二维码')" width="150">
            <template slot-scope="{ row }">
              <p class="text_blue qrcode" @click="viewQrcode(row.qrcode)">
                <i class="icon iconfont iconerweima text_blue"></i>
                {{ $t("查看") }}
              </p>
              {{ row.qrcode }}
            </template>
          </el-table-column>
          <el-table-column prop="line" :label="$t('状态')">
            <template slot-scope="{ row }">
              <span
                class="cabinet_status bg_blue text_white"
                v-if="row.line == 'online'"
                >{{ $t("在线") }}</span
              >
              <span
                class="cabinet_status text_white bg_light"
                v-if="row.line == 'offline'"
                >{{ $t("离线") }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="agency_name"
            :label="$t('代理商')"
          ></el-table-column>
          <el-table-column
            prop="employee_name"
            :label="$t('业务员')"
          ></el-table-column>
        </el-table>

        <div class="pagination_box ">
          <el-pagination
            background
            
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="page_size"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!-- 查看二维码 -->
    <el-dialog
      :visible.sync="showQRcode"
      width="240px"
      :close-on-click-modal="false"
    >
      <img
        :src="qrcode_img"
        style="width: 200px; height: 200px;margin-top: -10px;"
      />
      <p class="font14 text_black" style="text-align: center;margin: 0;">
        {{ qrcode_txt }}
      </p>
    </el-dialog>

    <merchant-list
      ref="merchantList"
      :agency_id="agent_id"
      :is_agency="true"
      @hide="closeMerchantList"
    ></merchant-list>
  </div>
</template>

<script>
import merchantList from "components/merchant-list/merchant-list.vue";
import util from "@/assets/js/util.js";
export default {
  name: "deviceList",
  data() {
    let that = this;
    return {
      page: 1,
      page_size: 20,
      total: 0,
      isShow: false,
      qrcode: "",
      device_id: "",
      agent_id: "",
      merchant: "",
      merchant_id: "",
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("所有"),
        },
        {
          value: 1,
          label: that.$t("在线"),
        },
        {
          value: 2,
          label: that.$t("离线"),
        },
      ],
      is_sub: 0,
      subArr: [
        {
          value: 0,
          label: that.$t("所有"),
        },
        {
          value: 1,
          label: that.$t("我的数据"),
        },
        {
          value: 2,
          label: that.$t("下级数据"),
        },
      ],
      is_export: '',
      tableData: [],
      showQRcode: false,
      qrcode_img: "",
      qrcode_txt: "",
    };
  },
  props: {
    defaultArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    model: {
      type: String,
      default: "vertical",
    },
  },
  components: {
    merchantList,
  },
  methods: {
    show(id) {
      this.device_id = "";
      this.qrcode = "";
      this.agent_id = id;
      this.merchant = "";
      this.merchant_id = "";
      this.clientVal = 0
      this.is_sub = 0
      this.is_export = ''
      this.qrcode_img = ''
      this.qrcode_txt = ''
      this.page = 1
      this.page_size = 20
      this.isShow = true;
      this.getData();
    },
    getData(type) {
      if (type == "search") {
        this.page = 1;
        this.is_export = ''
      }
      util
        .$http("/agency/agencyDevice?page=" + this.page, {
          page_size: this.page_size,
          cabinet_id: this.device_id,
          qrcode: this.qrcode,
          is_online: this.clientVal,
          agency_id: this.agent_id,
          sid: this.merchant_id,
          type: this.is_sub,
          is_export: this.is_export,
        })
        .then((res) => {
          if (res.code == 1) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }else if(res.code == 301) {
            window.location.href = res.msg
          }
        });
    },
    openMerchantList() {
      this.$refs.merchantList.show();
    },
    closeMerchantList(data) {
      this.merchant = data.name;
      this.merchant_id = data.id;
    },
    clearMerchant() {
      this.merchant = "";
      this.merchant_id = "";
    },
    clientChange(val) {
      this.clientVal = val;
    },
    subChange(val) {
      this.is_sub = val;
    },
    handleCurrentChange(val) {
      this.is_export = ''
      this.page = Number(val);
      this.getData();
    },
    exportExcel() {
      this.is_export = 1
      this.getData()
    },
    viewQrcode(qrcode) {
      this.showQRcode = true;
      this.qrcode_img =
      util.config.host + "/auth/qrcode?type=device&text=" + qrcode;
      this.qrcode_txt = qrcode;
    },
  },
};
</script>

<style scoped>
.head_search {
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.head_search .ipt_box {
  min-width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  min-width: 260px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .div_box {
  min-width: 260px;
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .switch_box {
  margin-right: 20px;
}
.head_search .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 21px;
  cursor: pointer;
  border-radius: 4px;
}
.head_search .export_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  margin-left: 20px;
  border-radius: 4px;
}
.head_box {
  margin-bottom: 20px;
}
.li {
  width: 22%;
  list-style: none;
  margin-bottom: 15px;
  margin-right: 4%;
}
.li:nth-of-type(4n) {
  margin-right: 0;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.circle {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 100%;
}
.qrcode {
  cursor: pointer;
  margin: 0;
}
.cabinet_status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.btn_box {
  margin-top: 40px;
}
</style>
